<template>
  <view class="content">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader pageTitle="填写资料"></singleHeader>
    <!-- #endif -->
    <view class="inp bb0" v-if="getVerify('name')">
      <view class="inpItem">
        <view class="inpItemLet">姓名</view>
        <!-- <view class="inpItemRig"></view> -->
      </view>

      <view class="inpCon">
        <input type="text" v-model="form.name" placeholder="请填写姓名" />
      </view>
    </view>

    <view class="inp" v-if="getVerify('tel')">
      <view class="inpItem">
        <view class="inpItemLet">手机号</view>
      </view>

      <view class="inpCon">
        <input type="number" v-model="form.mobile" placeholder="请填写手机号" />
      </view>
    </view>

    <view v-if="getVerify('id')">
      <view class="inp bb0">
        <view class="inpItem">
          <view class="inpItemLet">证件类型</view>
          <view class="inpItemRig">
            <picker mode="selector" :range="idDocList">
              <view class="pickerBox">
                <view class="pickerValue">{{
                  idDocList[index] || "请选择"
                }}</view>
                <i class="iconfont icon-arrow-right"></i>
              </view>
            </picker>
          </view>
        </view>
      </view>

      <view class="fileTit pt0">身份证人像面照片</view>
      <toolsFile
        :fileList="form.card_front"
        :max="1"
        @success="(e) => fileSuccess(form.card_front, e)"
        @remove="(i) => form.card_front.splice(i, 1)"
      ></toolsFile>

      <view class="fileTit">身份证国徽面照片</view>
      <toolsFile
        :fileList="form.card_before"
        :max="1"
        @success="(e) => fileSuccess(form.card_before, e)"
        @remove="(i) => form.card_before.splice(i, 1)"
      ></toolsFile>
      <view class="fileTit">请上传彩色照片or彩色扫描件</view>
    </view>

    <view class="inp" v-if="getVerify('reason')">
      <view class="inpItem">
        <view class="inpItemLet">申请理由</view>
      </view>

      <view class="inpCon">
        <input type="text" v-model="form.desc" placeholder="请填写申请理由" />
      </view>
    </view>

    <view class="submit safe-area-inset-bottom" @click="submit">
      <view class="m-btn"> {{ $t("list.confirm") }} </view>
    </view>

    <!-- 全局过渡组件 -->
    <transitionPage></transitionPage>
  </view>
</template>

<script>
import videoClassify from "@/api/videoClassify";
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import toolsFile from "@/components/tools/tools-file";

export default {
  components: {
    singleHeader,
    toolsFile,
  },

  data() {
    return {
      idDocList: ["中国大陆居民-身份证"],
      index: 0,
      form: {
        card_type: "",
        name: "",
        card_front: [],
        card_before: [],
        mobile: "",
        desc: "",
      },
      verify: [],
    };
  },

  computed: {
    getVerify() {
      return (key) => {
        return this.verify.indexOf(key) !== -1;
      };
    },
  },

  onLoad() {
    this.$utils.hideShareMenu();
    videoClassify.videoAuditApplyConfig().then((res) => {
      if (res.code === 0) {
        this.verify = res.data.verify;
      }
    });
  },

  methods: {
    fileSuccess(e, url) {
      e.push({
        url,
      });
    },

    // 提交表单
    submit() {
      let form = JSON.parse(JSON.stringify(this.form));

      if (this.getVerify("name") && !form.name) {
        this.$utils.toast("请填写姓名！");
        return;
      }

      if (this.getVerify("tel") && !form.mobile) {
        this.$utils.toast("请填写手机号！");
        return;
      }

      if (this.getVerify("id")) {
        if (!form.card_front.length) {
          this.$utils.toast("请上传身份证人像面照片！");
          return;
        }
        if (!form.card_before.length) {
          this.$utils.toast("请上传身份证国徽面照片！");
          return;
        }
      }

      if (this.getVerify("reason") && !form.desc) {
        this.$utils.toast("请填写申请理由！");
        return;
      }

      form.card_front = form.card_front.map((el) => el.url).join(",");
      form.card_before = form.card_before.map((el) => el.url).join(",");

      uni.showLoading({
        title: this.$t("home.loading"),
      });

      videoClassify
        .videoGoodsAuthorApply(form)
        .then((res) => {
          uni.hideLoading();
          if (res.code === 0) {
            this.$utils.showModal(
              this.$t("order.prompt"),
              res.msg,
              false,
              () => {
                uni.navigateBack({
                  delta: 1,
                });
              }
            );
            return;
          }

          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: "none",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx 30rpx 180rpx;
}

.inpItem {
  display: flex;
  align-items: center;

  .inpItemLet {
    margin-right: 20rpx;
    font-weight: bold;
  }

  .inpItemRig {
    flex: 1;
    overflow: hidden;
  }
}

.inp {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 18rpx;

  &.bb0 {
    border-bottom: 0;
  }

  input {
    font-size: 30rpx;
    color: #333;
    width: 100%;
  }

  input,
  picker {
    width: 100%;
    height: 80rpx;
    font-size: 24rpx;
    color: #333;
  }
}

.pickerBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 80rpx;
  color: #262626;

  .iconfont {
    font-size: 22rpx;
  }
}

.fileTit {
  padding: 30rpx 0 24rpx;
  font-size: 24rpx;
  color: #333;

  &.pt0 {
    padding-top: 0;
  }
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 10rpx;
  background: #fff;
  z-index: 3;
}
</style>
